<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1_引入生命周期</title>
    <style>
        .btn {
            width: 200px;
            height: 30px;
            background: indianred;
            border-radius: 10%;
            margin: 0 5px;
        }
    </style>
</head>
<body>
<!--准备好一个容器-->
<div id="test">

</div>
</body>

<!--核心库引入顺序，必须先是核心库然后在引入dom库-->
<script src="../js/react.development.js" crossorigin></script>
<!--用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>

<script type="text/babel">
    /**
     * a.初始化阶段：由ReactDOM.render()触发--初次渲染
     *      1.constructor
     *      2.componentWillMount
     *      3.render
     *      4.componentDidMount
     *          a.一般在这个勾子做一些初始化的事，例如：开启定时器，发送网络请求，订阅消息
     * b.更新阶段：由组件内部this.setState()或父组件render触发
     *      1.shouldComponentUpdate
     *      2.componentWillUpdate
     *      3.render ==>必须使用
     *      4.componentDidUpdate
     * c.卸载组件：由ReactDOM.unmountComponentAtNode()触发
     *      1.componentWillUnMount
     *          a.一般在这个勾子做一些收尾的事情，例如，关闭定时器，取消订阅
     */

    //1·创建组件
    class Count extends React.Component {
        constructor(props) {
            console.log('Count-constructor')
            super(props);
            this.state = {
                count: 0
            }
        }

        //+1
        add = () => {
            let {count} = this.state;
            count += 1;
            this.setState({count})
        }

        //组件将要挂载
        componentWillMount() {
            console.log('Count-componentWillMount')
        }

        //组件挂载完成
        componentDidMount() {
            console.log('Count-componentDIdMount')
        }

        //组件将要被卸载
        componentWillUnmount() {
            console.log('Count-componentWillUnMount')
        }

        //组件是否应该被更新，如果覆盖此函数，必须指定返回true或者false
        shouldComponentUpdate() {
            console.log('Count-shouldComponentUpdate')
            return true
        }

        //组件将要被更新
        componentWillUpdate() {
            console.log('Count-componentWillUpdate')
            return true
        }

        //组件更新完成
        componentDidUpdate() {
            console.log('Count-componentDidUpdate')
        }

        //卸载组件按钮的回调
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'));
        }

        //强制更新按钮的回调
        force = () => {
            this.forceUpdate()
        }

        render() {
            console.log('Count-render')
            let {count} = this.state;
            return (
                <div>
                    <h3>当前求和为{count}</h3>
                    <button className="btn" onClick={this.add}>点我+1</button>
                    <button className="btn" onClick={this.death}>卸载组件</button>
                    <button className="btn" onClick={this.force}>不更改状态数据，强制更新</button>
                </div>
            )
        }
    }

    class A extends React.Component {
        state = {
            carName: '奔驰C260L',
            carList: ['奥迪A4l', '迈巴赫S60', '宾利DB11', '宝马X8', '迈凯轮P1']
        }
        changeCar = () => {
            let number = Math.round(Math.random() * this.state.carList.length);
            console.log(number)
            if (number === this.state.carList.length) {
                number = 0
            }
            this.setState({
                carName: this.state.carList[number]
            })
        }

        render() {
            return (
                <div>
                    <h1>我是A组件</h1>
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName}/>
                </div>
            )
        }
    }

    class B extends React.Component {
        //组件将要接收props
        componentWillReceiveProps() {
            console.log('B-componentWillReceiveProps')
        }

        //组件将要挂载
        componentWillMount() {
            console.log('B-componentWillMount')
        }

        //组件挂载完成
        componentDidMount() {
            console.log('B-componentDIdMount')
        }

        //组件将要被卸载
        componentWillUnmount() {
            console.log('B-componentWillUnMount')
        }

        //组件是否应该被更新，如果覆盖此函数，必须指定返回true或者false
        shouldComponentUpdate() {
            console.log('B-shouldComponentUpdate')
            return true
        }

        //组件将要被更新
        componentWillUpdate() {
            console.log('B-componentWillUpdate')
            return true
        }

        //组件更新完成
        componentDidUpdate() {
            console.log('B-componentDidUpdate')
        }

        render() {
            console.log('B-render')
            return (
                <div>
                    <h1>我是B组件,接收到的车是：{this.props.carName}</h1>
                </div>
            )
        }
    }

    //2·渲染组件
    ReactDOM.render(<A/>, document.getElementById('test'))
</script>
</html>